<template>
    <div class="view">
        <nav-bar title="评价" :fixed="false">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="comment-scroll">
            <cube-scroll :data="commentList" @pulling-down="onPullingDown" @pulling-up="onPullingUp" :options="options" ref="scroll">
                <div class="comment-item" v-for="(comment,i) in commentList" :key="comment.comment_id">
                    <div class="item-top">
                        <img class="face" :src="comment.user.avatar_id>0?comment.user.avatar.file_path+'?imageView2/0/h/35':publicPath+'img/base/default-face.png'"/>
                        <div class="info">
                            <span class="user-name">{{comment.user.nickName | nicknameHandleToStar}}</span>
                            <span class="user-time">{{comment.create_time | timeStamp | dateDiff}}</span>
                        </div>
                    </div>
                    <div class="item-content">
                        {{comment.content}}
                    </div>
                    <div class="item-album " :class="{'item-album-single':comment.image.length===1}" v-if="comment.image.length > 0">
                        <div class="item-album-photo" v-for="(image,j) in comment.image">
                            <div class="item-album-photo-image" @click="previewImage(i,j)" :style="'background-image:url('+image.file_path+'?imageView2/0/h/150)'"></div>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>

    </div>
</template>

<script lang="ts">
    import {Component} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import NavBar from "@/components/aui/NavBar.vue";

    @Component({
        components: {
            NavBar
        }
    })
    export default class ProductComment extends Scene {
        private page: number = 1;
        private commentList: any[] = [];
        private publicPath: string = process.env.BASE_URL;
        private options: any = {
            pullDownRefresh: {
                threshold: 60,
                stop: 40,
                txt: "更新成功"
            },
            pullUpLoad: {
                threshold: 30,
                txt: {
                    more: "上滑加载更多评价",
                    noMore: "没有更多评价了"
                }
            }
        };


        private back(): void {
            this.navigateBack();
        }

        private get itemId(): string {
            return String(this.$route.query.id || 0);
        }

        private mounted() {
            this.getCommentList();
        }


        private onPullingDown(): void {
            this.page = 1;
            setTimeout(() => {
                this.getCommentList();
            }, 300);
        }

        private onPullingUp(): void {
            setTimeout(() => {
                this.getCommentList();
            }, 500);
        }

        private getCommentList() {
            Http.get(this.api.commentList, {item_id: this.itemId, page: this.page}).then((res) => {
                if (res.code === 1) {
                    if (this.page === 1) {
                        this.commentList = res.data.list.data;
                    } else {
                        this.commentList.push(...res.data.list.data);
                    }
                    this.page++;
                    if (res.data.list.data.length <= 0) {
                        this.page--;
                    }
                }
                (<any> this).$refs.scroll.forceUpdate(res.data.list.data.length > 0);
            });
        }

        private previewImage(i: number, j: number) {
            let imgs: string[] = [];
            for (let q in this.commentList[i].image) {
                imgs.push(this.commentList[i].image[q].file_path);
            }
            (<any> this).$createImagePreview({
                imgs: imgs,
                "initial-index": j
            }).show();
            console.log(imgs);
        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background $theme-page-common-background-color;

        .comment-scroll
            height calc(100vh - 44px - var(--safe-area-inset-top));
            position relative;
            background #fff;

            &::before
                content '';
                width 100%;
                height 1px;
                transform scaleY(.5);
                background #eeeeee;
                display block;
                position absolute;
                top 0;
                left 0;

            .comment-item
                padding 12px 12px 20px 12px;

                .item-top
                    display flex;
                    height 35px;
                    align-items center;

                    .face
                        width 35px;
                        height 35px;
                        border-radius 35px;

                    .info
                        height 35px;
                        flex 1;
                        display flex;
                        flex-direction column;
                        justify-content space-between;
                        padding 1px 10px 1px 10px;

                        .user-name
                            color #383838;
                            font-size 14px;

                        .user-time
                            color #999999;
                            font-size 12px;

                .item-content
                    font-size 14px;
                    line-height 1.3;
                    color #383838;
                    padding 10px 10px 10px 45px;

                .item-album
                    width 100%;
                    display flex;
                    padding 5px 10px 0 45px;
                    flex-wrap wrap;

                    .item-album-photo
                        width calc((100vw - 24px - 10px - 45px - 24px) / 3);
                        height calc((100vw - 24px - 10px - 45px - 24px) / 3);
                        position relative;
                        margin 0 12px 12px 0;
                        border-radius 7px;
                        overflow hidden;


                        .item-album-photo-image
                            width 100%;
                            height 100%;
                            position absolute;
                            background-position center;
                            background-size cover;

                        &:nth-child(3n)
                            margin 0 0 12px 0;

                .item-album-single
                    .item-album-photo
                        width 65vw;
                        height 65vw;


</style>
